<template>
	<!-- 标签组件，没时间完成 -->
  <div class="tab-bar">
    <div class="tab" v-for="tab in tabs" :key="tab.path" @click="navigateTo(tab)">
      <span>{{ tab.name }}</span>
      <span class="close" @click.stop="closeTab(tab)">x</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [], // 存储打开的标签页
    };
  },
  methods: {
    navigateTo(tab) {
      this.$router.push(tab.path);
    },
    closeTab(tab) {
      this.tabs = this.tabs.filter(t => t.path !== tab.path);
      // 可能需要执行其他逻辑，比如关闭关联的组件或资源
    },
    addTab(tab) {
      // 添加新标签，确保不重复
      if (!this.tabs.some(t => t.path === tab.path)) {
        this.tabs.push(tab);
      }
    },
  },
}
</script>

<style scoped>
.tab-bar {
  display: flex;
  background: #f5f5f5;
  padding: 5px;
  border-bottom: 1px solid #ddd;
}

.tab {
  margin-right: 10px;
  cursor: pointer;
  user-select: none;
}

.close {
  color: red;
  cursor: pointer;
  margin-left: 5px;
}
</style>